<template>
  <main class="login-content__main">
    <div class="login-body__main">
      <template v-if="currentMode">
        <CodeLogin
          key="code"
          v-bind="$attrs"
          @submitForm="submitForm"
          @beforeLogin="beforeLogin"
      /></template>
      <template v-else>
        <PassLogin
          key="pass"
          @beforeLogin="beforeLogin"
          @submitForm="submitForm"
          v-bind="$attrs"
      /></template>
      <div>
        <span></span>
        <span></span>
      </div>
    </div>
    <div class="switch-login">
      <a @click.prevent="currentMode = !currentMode">{{ switchMsg }}</a>
    </div>
  </main>
</template>

<script>
import CodeLogin from './LoginMobileCode.vue';
import PassLogin from './LoginMobileNormal.vue';
import { getRSAKey, getToCloudUrl } from 'api/modules/login.api';

export default {
  name: 'LoginMobile',
  components: {
    CodeLogin,
    PassLogin,
  },
  computed: {
    switchMsg() {
      return this.currentMode ? '切换到密码登录' : '切换到验证码登录';
    },
  },
  created() {
    // 获取RSkey
    this.handleRSAKey();
    getToCloudUrl()
      .then((res) => {
        if (res.code === 0) {
          this.globalProcessData.setUrl(res.data);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  },
  data() {
    return {
      // true 是验证码登录
      currentMode: true,
    };
  },
  methods: {
    /**
     * 获取钥匙
     */
    async handleRSAKey() {
      const params = {
        data: {},
      };
      const { code, data } = await getRSAKey(params);
      if (code !== 0 || !data) {
        this.$toast.fail('系统异常，请刷新重试！');
        return;
      }
      this.globalProcessData.setPublicKey(data);

      this.$emit('getPublicKey', data);
    },
    beforeLogin(data) {
      this.$emit('beforeLogin', data);
    },
    // 统一处理登录信息
    submitForm(data) {
      if (data.code === 0) {
        this.$toast('登录成功');
      }
      this.$emit('afterLogin', data);
    },
  },
};
</script>

<style lang="less" scoped>
.switch-login {
  color: #0080ff;
  font-size: 14px;
  text-align: center;
  > a {
    cursor: pointer;
  }
  margin-top: 78px;
}
@formPadding: 24px;
.login-content__main {
  .login-body__main {
    ::v-deep {
      .van-field__left-icon {
        margin-right: 10px;
      }
      .van-checkbox__label {
        color: #606266;
        padding: 10px 0;
      }
      .van-cell {
        padding: 4px 0;
        overflow: inherit;
        align-items: center;
        height: 53px;
      }
      .van-field {
        margin-bottom: 24px;
      }
      .van-field__error-message {
        position: absolute;
        bottom: -38px;
        left: -24px;
      }
      .van-field__control {
        color: #262626;
        font-size: 14px;
        &::placeholder {
          color: #c0c4cc;
        }
      }

      .van-field--error::after {
        border-color: red;
      }
      .van-cell::after {
        left: 0;
        right: 0;
      }
      .van-button--normal {
        border-radius: 8px;
      }
      .van-form {
        padding: 0 @formPadding;
      }
    }
  }
}
</style>
